import React, { Component } from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import Header from '../../components/Header/Header'
import { reqlogin } from '../../http/api'

export class Login extends Component {
  constructor() {
    super()
    this.state = {
      user: {
        phone: "",
        password: ""
      }
    }
  }
  changeUser(v,k){
    this.setState({
      user:{
        ...this.state.user,
        [k]:v
      }
    })
  }
  async login(){
    let res = await reqlogin(this.state.user)
    if(res.data.code === 200){
      sessionStorage.setItem("isLogin",JSON.stringify(res.data.list))
      Toast.show({
        content:res.data.msg
      })
      this.props.history.push("/index/home")
    }
  }
  render() {
    return (
      <div className='login'>
        <Header title="登录" register></Header>
        <Form layout='horizontal'>
          <Form.Item label='账号' name='username'>
            <Input placeholder='请输入手机号' clearable onChange={(v)=>this.changeUser(v,'phone')}/>
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable type='password' onChange={(v)=>this.changeUser(v,'password')}/>
          </Form.Item>
        </Form>
        <p style={{ textAlign: 'center' }}>
          <Button color='warning' size='middle' onClick={() => this.login()}>登录</Button>
        </p>
      </div>
    )
  }
}

export default Login